<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
	</head>
	<body>
		<style type="text/css">
			#div1 {
				position: absolute;
				top: 100px;
				left: 100px;
				width: 200px;
				height: 200px;
				box-shadow: -5px -5px 5px #000000;
			}
		</style>
		<div id="div1"></div>
		<button id="add">点击我增加</button>

		<script type="text/javascript">
			/**
			 * 浏览器中DOM和js采用的是不一样的引擎
			 * DOM采用的是渲染引擎，而js采用的是v8引擎
			 * 所以在用js操作DOM时会比较耗费性能，因为他们需要桥来链接他们
			 * 
			 */
			var add=document.querySelector("#add");
			var obj = {};
			obj.text = "aaa";
			var a = obj.text;
			var index = 0;
			add.onclick=function () {
				index++;
				if(index>5){
					return;
				}
				console.log(index);
				for(var i=0;i<10000;i++){
					// a = "test string this is a word";
					obj.text = "test string this is a word";
				}
			}
			
			var aaa = "aaa";
			var aaa = "bbb";
			
		</script>
	</body>
</html>